<script lang="tsx">
import type { MaybeRef } from '@vueuse/core'
import type { PropType } from 'vue'
import type { DescriptionsSchema } from './types'
import { ArrowDown, ArrowUp, QuestionFilled } from '@element-plus/icons-vue'
import {
  ElCollapseTransition,
  ElDescriptions,
  ElDescriptionsItem,
  ElIcon,
  ElTooltip,
} from 'element-plus'
import { useDesign } from 'fetm-hooks'
import { get } from 'lodash-es'
import { computed, defineComponent, ref, unref } from 'vue'
import { propTypes } from '../../../helpers/propTypes'

const { getPrefixCls } = useDesign()

const prefixCls = getPrefixCls('descriptions')

const defaultData = '--'

export default defineComponent({
  name: 'Descriptions',
  inheritAttrs: false,
  props: {
    title: propTypes.string.def(''),
    message: propTypes.string.def(''),
    collapse: propTypes.bool.def(true),
    border: propTypes.bool.def(true),
    column: propTypes.number.def(2),
    mobile: propTypes.bool.def(false),
    size: propTypes.oneOf(['large', 'default', 'small']).def('default'),
    direction: propTypes.oneOf(['horizontal', 'vertical']).def('horizontal'),
    extra: propTypes.string.def(''),
    schema: {
      type: Array as PropType<MaybeRef<DescriptionsSchema[]>>,
      default: () => [],
    },
    data: {
      type: Object as PropType<any>,
      default: () => ({}),
    },
  },
  setup(props, { slots, attrs }) {
    const getBindValue = computed((): any => {
      const delArr: string[] = [
        'title',
        'message',
        'collapse',
        'schema',
        'data',
        'class',
        'id',
        'style',
      ]
      const obj = { ...attrs, ...props }
      for (const key in obj) {
        if (delArr.includes(key)) {
          // @ts-ignore
          delete obj[key]
        }
      }
      if (unref(props.mobile))
        obj.direction = 'vertical'

      return obj
    })

    const getBindContainerValue = computed(() => {
      return {
        class: attrs.class,
        id: attrs.id,
        style: attrs.style,
      }
    })

    const getBindItemValue = (item: DescriptionsSchema) => {
      const delArr: string[] = ['field']
      const obj = { ...item }
      for (const key in obj) {
        if (delArr.includes(key)) {
          // @ts-ignore
          delete obj[key]
        }
      }
      return obj
    }

    // 折叠
    const show = ref(true)

    const toggleClick = () => {
      if (props.collapse)
        show.value = !unref(show)
    }

    return () => {
      return (
        <div
          class={[
            prefixCls,
            `bg-#fff dark:bg-[var(--el-bg-color,#141414)] dark:border-[var(--el-border-color,#4C4D4F)] dark:border-1px`,
            getBindContainerValue.value.class,
          ]}
          id={getBindContainerValue.value.id as string}
          style={getBindContainerValue.value.style as any}
        >
          {props.title ? (
            <div
              class={[
                `${prefixCls}-header`,
                'relative h-50px flex justify-between items-center layout-border__bottom px-10px cursor-pointer',
              ]}
              onClick={toggleClick}
            >
              <div
                class={[
                  `${prefixCls}-header__title`,
                  'relative font-18px font-bold ml-10px line-height-30px',
                ]}
              >
                <div class="flex items-center">
                  {props.title}
                  {props.message ? (
                    <ElTooltip content={props.message} placement="right">
                      <ElIcon class="ml-5px cursor-pointer" size={14}><QuestionFilled /></ElIcon>
                    </ElTooltip>
                  ) : null}
                </div>
              </div>
              {props.collapse ? (
                <ElIcon class="ml-5px cursor-pointer" size={14}>
                  {show.value ? (<ArrowDown />) : (<ArrowUp />)}
                </ElIcon>
              ) : null}
            </div>
          ) : null}

          <ElCollapseTransition>
            <div
              v-show={unref(show)}
              class={[`${prefixCls}-content`, 'p-20px']}
            >
              <ElDescriptions {...unref(getBindValue)}>
                {{
                  extra: () => (slots.extra ? slots.extra() : props.extra),
                  default: () => {
                    return unref(props.schema).map((item) => {
                      return (
                        <ElDescriptionsItem
                          key={item.field}
                          {...getBindItemValue(item)}
                        >
                          {{
                            label: () =>
                              item.slots?.label
                                ? item.slots?.label(item)
                                : item.label,
                            default: () =>
                              item.slots?.default
                                ? item.slots?.default(props.data)
                                : (get(props.data, item.field) ?? defaultData),
                          }}
                        </ElDescriptionsItem>
                      )
                    })
                  },
                }}
              </ElDescriptions>
            </div>
          </ElCollapseTransition>
        </div>
      )
    }
  },
})
</script>

<style lang="less" scoped>
@prefix-cls: ~'fetm-descriptions';
.@{prefix-cls}-header {
  &__title {
    &::after {
      position: absolute;
      top: 0;
      left: -10px;
      width: 4px;
      height: 100%;
      background: var(--el-color-primary);
      content: '';
    }
  }
}

.@{prefix-cls}-content {
  :deep(.el-descriptions__cell) {
    width: 0;
  }
}
</style>
